import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import Header from "../component/Header.jsx";
import { Flex, Typography } from "antd";
import image from "../img/9ddd0e7bf7e61a9b8c80f118641fc900.png";
import m from "../cssForPages/ManePage.module.css";
import { EXTENDEDFEEDBACK_PATH } from "../utils/navigation/paths.js";
import Buttons from "../component/Buttons.jsx";
import Line from "../component/Line.jsx";

export default function ManePage() {
  const navigate = useNavigate();
  const [selectedValue, setSelectedValue] = useState(null);

  useEffect(() => {
    const completed = localStorage.getItem("completed") === "true";
    if (completed) {
      navigate("/survey-completed");
    } else {
      const storedValue = localStorage.getItem("selectedValue");
      if (storedValue) {
        setSelectedValue(Number(storedValue));
      }
    }
  }, [navigate]);

  const handleClick = (value) => {
    setSelectedValue(value);
    localStorage.setItem("selectedValue", value);
  };

  return (
    <>
      <Header />
      <Line />
      <Flex vertical align={"center"} className={m.content}>
        <img src={image} className={m.imageMane} />
        <Typography.Title style={{ color: "white" }} className={m.textH1}>
          Уважаемый клиент!
        </Typography.Title>
        <Typography.Text className={m.textMane}>
          Запрос закрыт. Пожалуйста, оцените качество предоставленного сервиса
          по данному обращению, используя шкалу от 0 до 9, где 0 является «Хуже
          некуда» и 9 — «Отлично».
        </Typography.Text>
        <Link to={EXTENDEDFEEDBACK_PATH}>
          <Flex justify={"space-around"} className={m.buttons} wrap>
            <Buttons
              number={10}
              handleClick={handleClick}
              selectedValue={selectedValue}
            />
          </Flex>
        </Link>
        <Flex
          justify={"space-between"}
          style={{
            width: "530px",
          }}
          className={m.estimation}
        >
          <Typography.Text
            style={{
              color: "white",
              marginTop: "10px",
            }}
          >
            Хуже некуда
          </Typography.Text>
          <Typography.Text
            style={{
              color: "white",
              marginTop: "10px",
            }}
          >
            Отлично
          </Typography.Text>
        </Flex>
      </Flex>
    </>
  );
}
